<template>
    <div class="menu-container">
        <div class="d-flex justify-content-center p-4">
            <el-image :src="require('@/assets/images/ht-logo.png')" class="logo-img"></el-image>
        </div>
        <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :router="true">
            <el-menu-item index="/dashboard">
                <i class="el-icon-location-information"></i>
                <span slot="title">设备位置</span>
            </el-menu-item>
            <el-menu-item index="/equipmentInfo">
                <i class="el-icon-chat-dot-round"></i>
                <span slot="title">设备信息</span>
            </el-menu-item>
            <!-- <el-menu-item index="/accountManage" v-if="username === 'admin'">
                <i class="el-icon-s-platform"></i>
                <span slot="title">账号管理</span>
            </el-menu-item>
            <el-menu-item index="/kindManage">
                <i class="el-icon-s-management"></i>
                <span slot="title">分类管理</span>
            </el-menu-item>
            <el-submenu index="productManage">
                <template slot="title">
                    <i class="el-icon-s-goods"></i>
                    <span slot="title">商品管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/productManage-onShelf"><i class="el-icon-s-claim"></i>已上架</el-menu-item>
                    <el-menu-item index="/productManage-outShelf"><i class="el-icon-s-release"></i>已下架</el-menu-item>
                    <el-menu-item index="/productManage-onEdit"><i class="el-icon-edit"></i>编辑中</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="orderManage">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">订单管理</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="/orderManage-dfGoods"><i class="el-icon-sold-out"></i>待发货</el-menu-item>
                    <el-menu-item index="/orderManage-dsGoods"><i class="el-icon-shopping-bag-2"></i>待收货</el-menu-item>
                    <el-menu-item index="/orderManage-wcGoods"><i class="el-icon-circle-check"></i>已完成</el-menu-item>
                </el-menu-item-group>
            </el-submenu> -->
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultActive: '/',
            username: '',
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    mounted() {
        this.defaultActive = this.$route.path
        this.username = JSON.parse(localStorage.getItem('USER_INFO'))?.username
    }
}
</script>

<style lang='scss' scoped>
.menu-container {
    height: 100vh;
    background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);

    .logo-img {
        width: 50px;
        height: 50px;
    }
}

::v-deep .el-menu {
    background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}
</style>